<template>
  <div>
    <div class="top_box">
      <div class="top-box-inner1">
        <div class="avatar" style="margin-left: 20px;">
          <a-avatar
            :size="64"
            src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
          />
        </div>
        <div class="hello-contant">
          <div class="content-title">
            {{ timeFix }}<span class="welcome-text">，今天又是新的一天</span>
          </div>
          <div style="color: #8c8c8c">
            应急服务管理平台
          </div>
        </div>
      </div>
      <!-- <div class="extra-content">
        <div class="stat-item">
          <a-statistic title="事件总数" :value="56" />
        </div>
        <div class="stat-item">
          <a-statistic title="团队内排名" :value="8" suffix="/ 24" />
        </div>
        <div class="stat-item">
          <a-statistic title="项目访问" :value="2223" />
        </div>
      </div> -->
    </div>
    <div class="main-contant">
      <div>
        <a-card class="box1" title="事件统计" :bordered="false" :loading="loading">
          <BarChart style="height: 250px;width: 1050px;"/>
        </a-card>
        <a-card class="box2" title="事件列表" :bordered="false" :loading="loading"  :body-style="{padding:'10px'}">
          <AccidentTable/>
        </a-card>
      </div>
      <div>
        <a-card class="box3" title="通知公告" :bordered="false" :loading="loading" :body-style="{padding:'10px'}">
          <notice/>
        </a-card>
        <a-card class="box4" title="数据视图" :bordered="false" :loading="loading">
          <PercentageView style="margin: 0 auto;"/>
        </a-card>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { timeFix } from "@/utils/util";
import BarChart from './dashboard/BarChart';
import notice from './components/index/notice.vue';
import PercentageView from "./components/index/PercentageView";
import AccidentTable from "./components/index/AccidentTable";
export default {
  name: "Workplace",
  components: {
    BarChart,
    notice,
    PercentageView,
    AccidentTable
  },
  data() {
    return {
      timeFix: timeFix(),
      loading:false,
    };
  },
  mounted() {},
  methods: {},
  beforeCreate() {
    this.$nextTick(() => {
      document.body.setAttribute("style", "background:#f0f2f5");
    });
  },
  //实例销毁之前钩子--移除body 标签的属性style
  beforeDestroy() {
    document.body.removeAttribute("style");
  },
};
</script>
<style scoped>
.top_box {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}
.content-title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}
.top-box-inner1 {
  width: 400px;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
}
.extra-content {
  width: 300px;
  display: flex;
  margin-right: 30px;
  justify-content: space-between;
}
.stat-item {
  font-size: 24px;
}
.main-contant{
    display: flex;
}
.box1 {
  margin: 20px;
  width: 1100px;
  height: 330px;
}
.box2 {
  margin: 20px;
  width: 1100px;
  height: 350px;
}
.box3 {
  margin: 20px 20px 20px 0;
  width: 550px;
  height: 250px;
}
.box4 {
  margin: 20px 20px 20px 0;
  width: 550px;
  height: 430px;
}
</style>
  